<template>
  <div class="box_1">
    <bigscreen-header headerName="巴林右旗牲畜存栏统计" />

    <div class="w_full h_full-50 flex_row_around p_10 border_box">
      <!-- 1 -->
      <div class="w_48_p h_full bgs_full chart_box_bgi p_10 color_fff">
        <div class="title h_10_p"><span class="mt_20 fw_bold">大牲畜存栏</span></div>

        <div class="w_full h_90_p">
          <zhu-zhuang-tu-x class="chart" :value="data1" @clickAnimalName="clickChart1AnimalName" />    
        </div>
      </div> 

      <!-- 2 -->
      <div class="w_48_p h_full bgs_full  p_5 color_fff flex_column_between">
        <div class="w_full h_48_p chart_box_bgi p_10">
          <div class="w_full h_10_p"><span class="mt_20 fw_bold">{{ data2_name }}存栏详情</span></div>

          <div class="w_full h_90_p">
            <zhu-zhuang-tu class="chart" :value="data2" @clickAnimalName="clickChart2AnimalName" />
          </div>
        </div>

        <div class="w_full h_48_p chart_box_bgi p_10">
          <div class="w_full h_10_p"><span class="mt_20 fw_bold">{{ data3_name }}存栏详情</span></div>

          <div class="w_full h_90_p">
            <zhu-zhuang-tu class="chart" :value="data3" />
          </div>
        </div>
      </div> 
    </div>
  </div>
</template>

<script>
  import BigscreenHeader from '@/common/header/index.vue';
  import BingTu from '@/components/charts/bing-tu.vue'
  import ZhuZhuangTu from '@/components/charts/zhu-zhuang-tu.vue'
  import ZhuZhuangTuX from '@/components/charts/zhu-zhuang-tu-x.vue'

  export default {
    name: 'CunLan',
    components: { 
      BigscreenHeader,
      BingTu, 
      ZhuZhuangTu,
      ZhuZhuangTuX,
    },
    data() {
      return {
        activeIndex: 0,
        data1: {},
        data2: {},
        data3: {},

        data2_name: '牛',
        data3_name: '牛',
      }
    },
    mounted() {
      this.hamletName = this.$route.params.val
      setTimeout(() => {
        this.initChart()
      }, 100)
    },
    methods: {
      // 初始化图表
      initChart() {
        this.data1 = {
          unit: '头、只、羽',
          x: ['牛', '羊', '猪', '禽',  '马', '驴', '骡', '骆驼'].reverse(),
          y: [257137, 2592945, 32633, 483859, 21418,6847, 47, 390].reverse()
        }

        this.data2 = {
          unit: '头',
          x: ['牛', '肉牛', '和牛'],
          y: [141124, 243, 425]
        },

        this.data3 = {
          unit: '头',
          x: ['能繁母牛'],
          y: [141124]
        }
      },

      clickChart1AnimalName(animal_name) {
        this.data2_name = animal_name
        this.data2 = {}

        this.data3_name = ''
        this.data3 = {}

        if (animal_name == '牛') {
          this.data2 = {
            unit: '头',
            x: ['牛', '肉牛', '和牛'],
            y: [141124, 243, 425]
          }
        } else if (animal_name == '羊') {
          this.data2 = {
            unit: '只',
            x: ['能繁母羊', '绵羊', '山羊'],
            y: [1345198, 2228124, 364821]
          }
        } else if (animal_name == '猪') {
          this.data2 = {
            unit: '头',
            x: ['能繁母猪'],
            y: [3314]
          }
        } else if (animal_name == '禽') {
          this.data2 = {
            unit: '只',
            x: ['鸡', '鸭', '鹅'],
            y: [263886, 202085, 17888]
          }
        }
      },

      clickChart2AnimalName(animal_name) {
        this.data3_name = animal_name
        this.data3 = {}

        if (animal_name == '牛') {
          this.data3 = {
            unit: '头',
            x: ['能繁母牛'],
            y: [141124]
          }
        } else if (animal_name == '肉牛') {
          this.data3 = {
            unit: '头',
            x: ['西门塔尔牛', '三河牛', '安格斯牛'],
            y: [247485, 0, 0]
          }
        } else if (animal_name == '和牛') {
          this.data3 = {
            unit: '头',
            x: ['良种及改良种乳牛', '黑白花乳牛', '能繁母牛'],
            y: [5510, 5130, 3434]
          }
        } else if (animal_name == '绵羊') {
          this.data3 = {
            unit: '只',
            x: ['细毛羊及改良羊', '半细毛羊及改良羊', '小尾寒羊'],
            y: [51342, 693601, 213820]
          }
        } else if (animal_name == '鸡') {
          this.data3 = {
            unit: '只',
            x: ['专用型蛋鸡', '专用型肉鸡', '黄羽肉鸡', '兼用型鸡'],
            y: [162872, 15622, 0, 85392]
          }
        } 
      },


      // 跳转到 menu 页面
      goToMenuPage() {
        this.$router.push({
          path: "/bigscreen/menuPage"
        })
      },
    }
  }
</script>

<style scoped lang="less">
  @import url('../../assets/css/bigscreen.less');
  .activeColor {color: rgb(13, 246, 94) !important; }

  .content_item_box { width: 33.333333% !important; }
  .left_cover_box { 
    height: 100% !important;

    .title { color: #fff; text-align: center; padding-top: 12px; font-size: 20px; font-weight: 600; }
  }
  .map_cover_box { height: 100% !important; }

  @media screen and (min-width: 1200px) and (max-width: 1399px) {
    
  }
</style>